<template>
	<ReturnPage title="首页"></ReturnPage>
	<view class="content">
		<view class="btn-box">
			<view v-for="btn in props.buttons" :key="btn.text" class="btn" @click="btn.click">
				<view class="btn-wrapper">
					<image :src="btn.icon" mode="widthFix" class="btn-img"></image>
					<text class="btn-text">{{btn.text}}</text>
				</view>
			</view>
		</view>
		<view class="panel-box">
			<FormPanel title="赛程列表" :description="`赛事:${props.matchName}`" :btns="props.data.length > 0 ? props.formBtns : []" customBodyClass="custom-panel-body">
				<view class="subtitle" v-if="props.data.length > 0">
					<view class="subtitle-left">
						<image src="/src/static/info.png" mode="aspectFit" class="subtitle-left-icon"></image>
						点击赛程可查看该赛程下的房间列表
					</view>
					<view class="subtitle-right">共{{props.data.length}}个赛程</view>
				</view>
				<view class="list">
					<view v-if="props.loading" class="loading-container">
					  <view class="loading-spinner"></view>
					  <text>加载中...</text>
					</view>
					<view v-if="props.data.length === 0" class="empty-state">
					  <text>暂无赛程</text>
					</view>
					<swiper v-else class="swiper" :class="{'scroll-swiper': hasScroll}" :autoplay="false" :vertical="true" style="height: 100%;" :current="props.currentIndex" @change="onSwiperChange">
						<swiper-item v-for="item in props.data" :key="item.id" class="item">
							<view class="item-title">
								<view class="item-name">{{item.name}}</view>
								<view class="schedule-status" :class="[props.getStatusClass(item.status)]">{{props.getStatusText(item.status)}}</view>
							</view>
							<view class="item-form">
								<view v-for="formItem in props.formItems" class="form-item">
									<view class="form-item-label">{{formItem.label}}：</view>
									<text class="form-item-text">{{ typeof formItem.format === 'function' ? formItem.format(item[formItem.key]) : item[formItem.key] }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<SwiperScrollbar v-if="hasScroll" :index="props.currentIndex" :length="props.data.length" ></SwiperScrollbar>
				</view>
			</FormPanel>
		</view>
	</view>
	
</template>

<script setup>
import ReturnPage from '@/components/ReturnPage.vue'
import FormPanel from '@/components/FormPanel.vue'
import { computed } from 'vue'
import SwiperScrollbar from '@/components/SwiperScrollbar.vue'

const props = defineProps(['buttons', 'formBtns', 'loading', 'data', 'currentIndex', 'setCurrentIndex', 'formItems', 'getStatusClass', 'getStatusText', 'matchName'])
const onSwiperChange = ({ detail }) => {
	props.setCurrentIndex(detail.current)
}
const hasScroll = computed(() => {
	return props.data.length > 1
})
</script>

<style scoped lang="scss">
.content {
	padding: 12rpx 50rpx 18rpx 50rpx;
	height: calc(100vh - 38rpx);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	font-family: Source Han Sans CN, Source Han Sans CN;
}
.btn-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}
.btn {
	position: relative;
	margin-bottom: 12rpx;
	.btn-wrapper {
		width: 118rpx;
		height: 90rpx;
	}
	.btn-img {
		height: 100%;
		width: 100%;
	}
	.btn-text {
		position: absolute;
		bottom: 11rpx;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-family: YouSheBiaoTiHei-Regular;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 16rpx;
	}
}

.panel-box {
	height: 100%;
	width: auto;
	flex-grow: 1;
	margin-left: 26rpx;
	&:deep(.schedule-query-btn) {
		width: 104rpx!important;
	}
	&:deep(.custom-panel-body) {
		padding-top: 0;
	}
	.subtitle {
		display: flex;
		justify-content: space-between;
		height: 22rpx;
		font-weight: 400;
		font-size: 10rpx;
		color: #4A5971;
		line-height: 22rpx;
		.subtitle-left {
			display: flex;
			.subtitle-left-icon {
				height: 100%;
				width: 20rpx;
			}
		}
	}
}

.list {
	width: 100%;
	height: calc(100% - 22rpx);
	overflow: auto;
	position: relative;
	.item {
		padding: 8rpx;
		line-height: 24rpx;
		height: 100%;
		box-sizing: border-box;
		.item-title {
			width: 100%;
			font-weight: bold;
			font-size: 13rpx;
			color: #384A58;
			text-indent: 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
		}
		.item-form {
			font-weight: 400;
			font-size: 13rpx;
			justify-content: center;
			.form-item {
				width: 100%;
				display: flex;
			}
			.form-item-label {
				color: #99A1A4;
				width: 190rpx;
				text-align: right;
			}
			.form-item-text {
				color: #4A5971;
				display: flex;
				flex-grow: 1;
				justify-content: space-between;
			}
		}
		
	}
}
.swiper {
	background-color: #F0F0E4;
	border-radius: 6rpx;
}
.scroll-swiper {
	width: calc(100% - 16rpx);
}

.schedule-status {
	width: 72rpx;
	height: 27rpx;
	font-size: 13rpx;
	font-weight: bold;
	line-height: 27rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
	&.status-pending { background-image: url("/static/btn_yellow.png"); color: rgb(155, 59, 24); }
	&.status-active { background-image: url("/static/btn_green.png"); color:rgb(0, 89, 24); }
	&.status-finished { background-image: url("/static/btn_red.png"); color: #fff; }
  }

.loading-container, .empty-state {
	text-align: center;
	color: #999;
	padding: 50rpx;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>